<template>
  <div style="padding: 20px 20px">
    <div class="wrap">
      <split-pane
        @resize="resize"
        :min-percent="20"
        :default-percent="20"
        split="vertical"
      >
        <template slot="paneL">
          <el-button
            v-preventReClick
            type="primary"
            size="mini"
            icon="el-icon-view"
            @click="konwledgeMiniDrawer_open = true"
            >小程序预览
          </el-button>
          <!-- 知识库类别 -->
          <div class="paneL" v-loading="category_loading">
            <tree
              type="view"
              ref="tree"
              :activeIndex.sync="activeIndex"
              :data="categorylist"
              @select="categorySelect"
            ></tree>
          </div>
        </template>
        <template slot="paneR">
          <!-- 内容 -->
          <div class="paneR">
            <div>
              <el-input
                placeholder="请输入内容"
                v-model="queryParams.title"
                class="input-with-select"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="getList"
                ></el-button>
              </el-input>
              <!-- 暂无知识点 -->
              <el-empty
                style="margin-top: 10vh"
                description="暂无知识点"
                v-if="list.length == 0"
              ></el-empty>
              <div v-else class="knowledgeList rela flex" v-loading="loading">
                <!-- <div class="addknowledge abso shou" @click="addKnowledge">
                  <img src="@/assets/images/whiteadd.png" alt="" />
                </div> -->
                <el-card
                  @click.native="handleDetail(item)"
                  v-if="list.length > 0"
                  class="knowledge shou"
                  v-for="(item, index) in list"
                  :key="index"
                >
                  <img
                    class="knowledgePic"
                    :src="
                      item.knowledgePic
                        ? item.knowledgePic
                        : 'https://oss.metaxun.com/wx/zy/nocourse.png'
                    "
                    alt=""
                    srcset=""
                  />

                  <div class="overtxt knowledgeTitle" style="width: 100%">
                    {{ item.title }}
                  </div>
                </el-card>
              </div>

              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                :pageSizes="[16, 32, 64, 128]"
                @pagination="getList"
              />
            </div>
          </div>
        </template>
      </split-pane>
    </div>
    <!-- 添加知识点 -->
    <addKnowledge
      :open.sync="addKnowledge_open"
      :type="addKnowledge_type"
      :id="addKnowledge_id"
      :categoryid="addKnowledge_categoryid"
      @refresh="getList()"
    ></addKnowledge>
    <!-- 小程序预览 -->
    <konwledgeMiniDrawer
      :show.sync="konwledgeMiniDrawer_open"
    ></konwledgeMiniDrawer>
  </div>
</template>
  
<script>
import { getCategoryList, postCategory } from "@/api/knowledge/category";
import { getknowledgeList } from "@/api/knowledge/knowledge";
import tree from "./components/tree";
import konwledgeMiniDrawer from "@/components/konwledgeMiniDrawer";
import addKnowledge from "./components/addKnowledge";
import splitPane from "vue-splitpane";

export default {
  components: { splitPane, tree, addKnowledge, konwledgeMiniDrawer },
  data() {
    return {
      konwledgeMiniDrawer_open: false,
      addKnowledge_open: false,
      addKnowledge_type: 1,
      addKnowledge_id: null,
      addKnowledge_categoryid: null,
      //
      activeIndex: 0,
      category_loading: false,
      categorylist: [],
      list: [],
      total: 0,
      showSearch: true,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 16,
        title: undefined,
        categoryId: undefined,
        createName: undefined,
        status: "0",
      },
    };
  },
  watch: {},
  mounted() {
    this.getCategorylist();
  },
  methods: {
    /* 详情 知识点 */
    handleDetail(row) {
      console.log("详情 知识点");
      this.addKnowledge_open = true;
      this.addKnowledge_categoryid = null;
      this.addKnowledge_id = row.knowledgeId;
      this.addKnowledge_type = 5;
    },
    /* 添加知识点 */
    addKnowledge() {
      this.addKnowledge_open = true;
      this.addKnowledge_type = 1;
      this.addKnowledge_id = null;
      this.addKnowledge_categoryid = this.queryParams.categoryId;
    },
    /* 获取知识点 */
    async getList() {
      try {
        this.loading = true;
        let res = await getknowledgeList(this.queryParams);
        this.loading = false;
        if (res.code == 200) {
          this.list = res.rows;
          this.total = res.total;
        }
      } finally {
        this.loading = false;
      }
    },
    /* 获取分类列表 并如果有的话获取 第一个分类获取详细*/
    async getCategorylist() {
      try {
        this.category_loading = true;
        let res = await getCategoryList();
        this.category_loading = false;
        if (res.code == 200) {
          this.categorylist = res.rows.map((item) => {
            return { ...item, showRename: false };
          });
          if (this.categorylist.length > 0) {
            this.queryParams.categoryId = this.categorylist[0].categoryId;
            this.getList();
          }
        }
      } finally {
        this.category_loading = false;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    resize() {},

    /* 分类选中 */
    async categorySelect(data) {
      this.queryParams.categoryId = data.categoryId;
      this.queryParams.pageNum = 1;
      this.getList();
    },
  },
};
</script>
  
<style scoped lang="scss">
::v-deep .el-card__body {
  padding: 10px 20px;
}
.knowledgeList {
  align-content: flex-start;
  width: 100%;
  .knowledge {
    margin: 10px;
    .knowledgeTitle {
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      line-height: 30px;
    }
    .knowledgePic {
      width: 158px;
      height: auto;
    }
    height: 148px;
    width: 200px;
    margin-top: 3px;
  }
  overflow-y: scroll;
  width: 100%;
  height: calc(100vh - 220px);
  .addknowledge {
    bottom: 50px;
    right: 50px;
    width: 50px;
    height: 50px;
    background: rgb(17, 169, 131);
    border-radius: 50%;
    img {
      margin: 10px 0 0 10px;
      width: 30px;
      height: 30x;
    }
  }
}
.tip {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 12px;
  margin: 20px 0;
}
.wrap {
  height: calc(100vh - 86px - 52px);
}
.paneL {
  overflow-y: scroll;
  border-right: 1px solid rgb(250, 250, 250);
  height: 100%;
  width: 100%;
}
.paneR {
  height: 100%;
  width: 100%;
}
::v-deep .splitter-pane-resizer.vertical {
  width: 0px;
}
::v-deep .splitter-pane.vertical.splitter-paneR {
  padding-left: 0;
}
::v-deep .splitter-pane.vertical.splitter-paneL {
  padding-right: 0;
}
</style>